import config from "@/config";
import { usePrimaryColor } from '@/components/layout/hooks/usePrimaryColor';

import {SYSTEM_SETTING} from "../localtions"

const { defaultSetting } = config;

const useLayoutStore = defineStore("layout", {
    state: () => {
        return {
          isCollapse: false, //菜单栏展开收起
          themeId: defaultSetting.themeId, //风格
          layoutId: defaultSetting.layoutId, // 布局
          primaryColor: defaultSetting.primaryColor, //颜色
          isGray: defaultSetting.isGray,
        };
    },
    getters: {

    },
    actions: {
        // 修改导航展开收起
        updateIsCollapse(isCollapse: boolean){
            this.isCollapse = isCollapse;
        },
        // 切换主题风格
        changeTheme(themenId: string){
            this.themeId = themenId; 
        },
        // 切换布局模式
        changeLayoutMode(layoutId: string){
            this.layoutId = layoutId;
        },
        // 修改网站颜色
        changColorGray(isGray: boolean){
            this.isGray = isGray;
        },
        // 保存用户设置信息
        saveSetting(setting: any){
            sessionStorage.setItem(SYSTEM_SETTING, JSON.stringify(Object.assign(config.defaultSetting, {...setting})))
        },
        // 初始页面挂载信息
        start(options: any){
            let obj = Object.assign(defaultSetting, {...options});
            this.saveSetting(obj);
            usePrimaryColor(obj.primaryColor);
            this.changeTheme(obj.themeId);
            this.changeLayoutMode(obj.layoutId);
            this.changColorGray(obj.isGray);
        }
    }

})

export default useLayoutStore;